import React, { Component } from 'react';
import { NavBar, Toast } from 'antd-mobile'
// 导入封装请求
import * as goods from '../api/goods'
// 导入scss
import '../styles/Collection.scss'

class Collection extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collection: [],
        }
    }
    // 获取收藏列表数据
    componentDidMount() {
        var userid = localStorage.getItem("userid ")
        goods.good_favlist({ userid }).then((res) => {
            this.setState({ collection: res.data.list })
            console.log(res.data.list);
        })
    }

    // 点击返回
    back() {
        this.props.history.goBack();
    }
    // 取消收藏
    cancel(index) {
        //     问题： 调用接口后，请求成功，显示取消成功，但是数据不会更新

        // var userid = localStorage.getItem("userid ")
        // var goodid = this.state.collection.id
        // goods.good_unfav({ userid, goodid }).then((res) => {
        //     console.log(res);
        //     if (res.data.code == 200) {
        //         Toast.show({
        //             content: '已取消收藏',
        //         })
        //     }
        // })
        this.state.collection.splice(index, 1)
        Toast.show({
            content: '已取消收藏'
        })
        this.setState({
            collection: this.state.collection
        })
    }

    render() {
        return (
            <div className='collection'>
                {/* 头部 */}
                <NavBar onBack={() => { this.back() }}> <h4>我的收藏</h4> </NavBar>
                <div className='collection-two'>
                    {
                        this.state.collection.map((item, index) => {
                            return (
                                <div className='collection-one' key={index}>
                                    <div className='img'><img src={item.pic} alt="" /> </div>
                                    <div className='name'>
                                        <div className='p'>{item.brandEN} {item.brand} {item.name}</div>
                                        <div className='price'>价格 ￥{item.salesPrice.value}</div>
                                        <span className='cancel' onClick={() => { this.cancel(index) }}>取消收藏</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Collection;